<template>
  <div class="pk_container">
    <!-- 对话框 2222222-->
    <el-dialog
      v-model="store.isPkDialog"
      width="500"
      class="pk_box flex_colm"
      @close="pkDiaClose"
    >
      <template #header>
        <div class="my-header flex">
          <img
            style="width: 38px; height: 28px; margin-right: 5px"
            src="../assets/pk.png"
            alt=""
          />
          <span class="fs_18 fff">战绩</span>
        </div>
      </template>
      <div class="dialog_content">
        <div class="outline_title flex_row">
          <div class="outline flex fff fs_16">今日</div>
          <div class="outline flex fff fs_16">本周</div>
        </div>
        <div class="list">
          <div class="records bs_bdb" v-for="(icon, i) in recoredList" :key="i">
            <div class="item flex_bt">
              <div class="left_item flex fff">
                <div
                  class="fff flex"
                  style="width: 32px; height: 35px"
                  v-if="icon.sort"
                >
                  {{ icon.sort }}
                </div>
                <img
                  v-else
                  style="width: 32px; height: 35px"
                  :src="img.img(icon.url)"
                  alt=""
                />

                <div class="img_box bd_radio"></div>
                <div>
                  <div style="margin-bottom: 10px">橙汁比u比u</div>
                  <div class="flex_row">
                    <div class="bg_sort fs_8 bs_bdb">1</div>
                    <div class="bg_sort fs_8 bs_bdb">2</div>
                  </div>
                </div>
              </div>
              <div class="right_item fff">
                <span style="color: #3d9a09"> 14</span> 胜
                <span style="color: #9d263f"> 0</span> 负
                <span style="color: #62a2f6"> 10</span> 平
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="foot_posi">xxxx</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from "vue";
import { useCounterStore } from "../store";
import img from "../utils";
const store = useCounterStore();
const pkDiaClose = () => {
  store.isPkDialog = false;
};
const recoredList = ref([
  {
    url: "../assets/record_1.png",
  },
  {
    url: "../assets/record_2.png",
  },
  {
    url: "../assets/record_3.png",
  },
  {
    sort: "4",
  },
]);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.pk_box {
  .dialog_box {
    width: 300px;
    height: 300px;
  }
  //内容
  .dialog_content {
    height: 100%;
    // border: 1px solid red;
    .outline_title {
      .outline {
        width: 71px;
        height: 36px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .outline:first-child {
        background-image: url("../assets/icon_fill.png");
      }
      .outline:last-child {
        background-image: url("../assets/icon_outline.png");
      }
    }
    .foot_posi {
      width: 398px;
      height: 109px;
      border: 1px solid #952ae9;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    .list {
      height: 467px;
      overflow-y: auto;
      position: relative;
    }
    .records {
      padding: 22px 0;

      .item {
        .img_box {
          width: 54px;
          height: 54px;
          background: #ffffff;
          margin: 0 12px 0 18px;
        }
      }
    }

    // .line {
    //   width: 363px;
    //   height: 0px;
    //   border: 1px solid #ffffff;
    //   opacity: 0.1;
    // }
  }
}
// common
.bg_sort:first-child {
  width: 24px;
  height: 12px;
  background-image: url("../assets/icon_purple.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-left: 15px;
  line-height: 12px;
  margin-right: 4px;
}
.bg_sort:last-child {
  width: 35px;
  height: 13px;
  background-image: url("../assets/icon_pink.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-left: 24px;
  line-height: 13px;
}
</style>
